@mixin arrow{
    width: 0;
    height: 0;
    display: inline-block;
}

@mixin arrow-down($size:3px,$color:#666) {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
}

@mixin arrow-up ($size:3px,$color:#666){
    border-bottom: $size solid $color;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
}

@mixin arrow-left ($size:3px,$color:#666){
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
}

@mixin arrow-right ($size:3px,$color:#666){
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
}

@mixin extend {
    position: relative;
    &::after{
        content: ''; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px;
    }
}